{extend name="public/base" /}
{block name="css"}
{load href="https://ujia-res.oss-cn-shenzhen.aliyuncs.com/common/third-party/swiper/5.0.3/dist/swiper.min.css" /}
<style>
  .swiper-container {
    width: 100%;
    height: 100%;
  }
  .swiper-slide {
    text-align: center;
    align-items: center;
  }
  .swiper-container .swiper-button-prev::after {
    content: '';
  }
  .swiper-container .swiper-button-next::after {
    content: '';
  }
  .swiper-container .swiper-button-prev{
    background-image: url('https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/esthetics/pc/left.png') ;
    left: 15px;
    right: auto;
    width: 30px;
    height: 30px;
    background-size: cover;
  }
  .swiper-container .swiper-button-next{
    background: url('https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/esthetics/pc/right.png');
    right: 15px;
    width: 30px;
    height: 30px;
    left: auto;
    background-size:cover;
  }

  .swiper-container1 {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
  }

  .swiper-pagination1 {
    position: absolute;
    z-index: 100;
    right: 10px !important;
    bottom: 90px !important;
    text-align: right;
  }

  .swiper-container1 .swiper-pagination1 .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    border-radius: 0;
    border: 1px solid rgba(162,125,98,1);
  }
  .swiper-container1 .swiper-pagination1 .swiper-pagination-bullet-active {
    background: #A27D62;
  }
  .swiper-container1 .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0px 5px;
  }

  .appointment {
    margin-left: 15px;
    font-size: 14px;
    background: #A83641;
    border: 0;
    padding: 5px 20px;
    color: #ffffff;
  }
</style>
{/block}
{block name="main"}
<section class="container-fluid main-container">
  <div style="position: relative">
    <img class="img-fluid" style="cursor: pointer" src="https://res.bestyoujia.com/web/ZMYJ/reform/h5/banner.png">
  </div>

  <div class="d-flex flex-column" style="padding-bottom: 40px;align-items: center">
    <img class="img-fluid" style="margin: 30px 0;width: 80%" src="https://res.bestyoujia.com/web/ZMYJ/reform/h5/t1.png">
    <div class="swiper-container" style="overflow: hidden;width: 94%">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/reform/h5/wt1.png">
        </div>
        <div class="swiper-slide">
          <img class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/reform/h5/wt2.png">
        </div>
        <div class="swiper-slide">
          <img class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/reform/h5/wt3.png">
        </div>
        <div class="swiper-slide">
          <img class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/reform/h5/wt4.png">
        </div>
        <div class="swiper-slide">
          <img class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/reform/h5/wt5.png">
        </div>
      </div>
    </div>
<!--    <button onclick="showAppointmentLayer()" style="border: none;margin-top: 30px;background: #A27D62;padding: 10px 8px;font-size: 13px;color: #ffffff">预约精装房验房服务 ></button>-->
  </div>

  <div class="d-flex flex-column" style="padding-bottom: 30px;background-image: url('https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/reform/mobile/gzbg.png');background-size: cover;align-items: center">
    <img class="img-fluid" style="margin: 40px 0;max-width: 80%" src="https://res.bestyoujia.com/web/ZMYJ/reform/h5/t2.png">
    <div class="swiper-container1" style="overflow: hidden;width: 94%">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/reform/h5/gz1.png">
        </div>
        <div class="swiper-slide">
          <img class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/reform/h5/gz2.png">
        </div>
        <div class="swiper-slide">
          <img class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/reform/h5/gz3.png">
        </div>
        <div class="swiper-slide">
          <img class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/reform/h5/gz4.png">
        </div>
        <div class="swiper-slide">
          <img class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/reform/h5/gz5.png">
        </div>
        <div class="swiper-slide">
          <img class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/reform/h5/gz6.png">
        </div>
      </div>
      <div class="swiper-pagination1"></div>
    </div>
<!--    <button onclick="showAppointmentLayer()" style="border: none;margin-top: 30px;padding: 10px 12px;font-size: 13px;background: #A27D62;color: #ffffff">预约精装改造服务 ></button>-->
  </div>

  <div class="d-flex flex-column" style="padding-bottom: 30px;align-items: center">
    <img class="img-fluid" style="margin: 30px 0;width: 75%" src="https://res.bestyoujia.com/web/ZMYJ/reform/h5/t3.png">
    <div style="margin: 0 auto;display: flex;width: 100%">
      <div style="flex: 1;margin: 0 5px 0 10px">
        <img class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/reform/h5/gs1.png">
      </div>
      <div style="flex: 1;margin: 0 10px 0 5px">
        <img class="img-fluid" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/reform/mobile/gs2.png">
      </div>
    </div>
    <div style="margin: 10px auto 0;display: flex;width: 100%">
      <div style="flex: 1;margin: 0 5px 0 10px">
        <img class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/reform/h5/gs3.png">
      </div>
      <div style="flex: 1;margin: 0 10px 0 5px">
        <img class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/reform/h5/gs4.png">
      </div>
    </div>
<!--    <button onclick="showAppointmentLayer()" style="border: none;margin-top: 30px;padding: 10px 12px;font-size: 13px;background: #A27D62;color: #ffffff">预约精装改造服务 ></button>-->
    <img class="img-fluid mx-auto" style="margin: 40px 0 0;width: 94%" src="https://res.bestyoujia.com/web/ZMYJ/reform/h5/pp.png">
  </div>

  <div class="d-flex flex-column" style="padding-bottom: 30px;background-image: url('https://res.bestyoujia.com/web/ZMYJ/reform/h5/gy_bg.png');background-size: cover;align-items: center">
    <img class="img-fluid" style="margin: 30px 0 0;width: 95%" src="https://res.bestyoujia.com/web/ZMYJ/reform/h5/gy1.png">
    <img class="img-fluid" style="margin: 10px 0 0;width: 95%" src="https://res.bestyoujia.com/web/ZMYJ/reform/h5/gy2.png">
    <img class="img-fluid" style="margin: 10px 0 0;width: 95%" src="https://res.bestyoujia.com/web/ZMYJ/reform/h5/gy3.png">
    <img class="img-fluid" style="margin: 10px 0 0;width: 95%" src="https://res.bestyoujia.com/web/ZMYJ/reform/h5/gy4.png">
  </div>

  <div class="d-flex flex-column p-t-5">
    <img class="img-fluid mx-auto" style="width: 100%;cursor: pointer" src="https://res.bestyoujia.com/web/ZMYJ/reform/h5/eg.png">
  </div>

  <div class="d-flex flex-column m-t-5">
    <img class="img-fluid mx-auto" onclick="showAppointmentLayer()" style="cursor: pointer" src="https://res.bestyoujia.com/web/ZMYJ/reform/h5/yy.png">
  </div>
</section>
{/block}
{block name="js"}
{load href="https://ujia-res.oss-cn-shenzhen.aliyuncs.com/common/third-party/swiper/5.0.3/dist/swiper.min.js" /}
<script>
    $('#nav').find('ul > li').eq(2).addClass('nav-active');
    $("#nav").scrollLeft(65*2);

    const swiper = new Swiper('.swiper-container', {
        autoplay: {
          delay: 3000,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });

    const swiper1 = new Swiper('.swiper-container1', {
        pagination: {
            el: '.swiper-pagination1',
            clickable: true
        },
        autoplay: {
            delay: 3500,
            stopOnLastSlide: false,
            disableOnInteraction: true,
        },
    });
</script>
{/block}